<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 2 | Dashboard</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--&lt;!&ndash; Font Awesome &ndash;&gt;-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--&lt;!&ndash; Ionicons &ndash;&gt;-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=39cd89cd">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <script src="https://file.ggxqce.com/web/vue.min.js"></script>
    <style>
        .title{
            height: 30px;
            line-height: 30px;
            border-bottom: 1px solid #bcbcbe;
            font-size: 14px;
            position: relative;
        }
        .title-con{
            position: absolute;
            text-align: center;
            border-top: 1px solid rgb(203, 203, 205);
            border-right: 1px solid rgb(203, 203, 205);
            border-bottom: none;
            border-left: 1px solid rgb(203, 203, 205);
            border-image: initial;
            padding: 0 10px;
            left: 50%;
            bottom: -1px;
            background: #fff;
            margin-left: -39px;

        }
        .list{
            line-height: 24px;
            /*padding-left: 60px;*/
            font-size: 14px;
            color:#333;
            overflow: hidden;
            position: relative;
        }

        .listTitle{
            display: block;
            width: 75px;
            height: 24px;
            text-align: justify;
            left: 0;
            position: absolute;
            top: 10px;
            background: #F4F4F4;
            border-radius: 50px;
            padding: 0 8px;

        }
        .listTitle::after{
            content: '';
            display: inline-block;
            padding-left: 100%;
        }
        .listItme{
            color: #228bee;
            margin: 10px 0;

            margin-left: 16px;
            cursor: pointer;
            height: 24px;
            line-height: 23px;
            display: inline-block;
            border: 1px solid #228bee;
            width: 104px;
            text-align: center;
        }
        .templateStyle {
            border: 1px solid #ddd;
            margin-bottom: 10px;
            padding-bottom: 10px;
        }
        .nav-tabs-custom {
            padding: 10px;
            margin-bottom: 0;
            box-shadow: none;
            position: relative;
            overflow: hidden;
        }
        .moduleName {
            float: left;
            height: 27px;
            line-height: 27px;
            font-size: 22px;
            width: 100px;
            text-align: center;
        }
        .bg-aqua{
            background-color: #4796e5 !important;
        }
    </style>
</head>
<body >
<!-- Content Header (Page header) -->
<section class="content" id="app">
    <div class="templateStyle">
        <div class="nav-tabs-custom oaReportNav"><div class="moduleName">字段配置</div>
            <ul class="nav nav-tabs pull-right" style="margin-bottom: 10px;"></ul>
            <button type="button" class="btn oaBtn btn-sm pull-right" style="margin-left: 10px; position: absolute; right: 10px; top: 10px;" @click="addDetail">新增
            </button>
        </div>

        <!-- Small boxes (Stat box) -->
        <div class="row" style="margin: 0;">
            <div class="col-lg-3 col-xs-6" v-for="(item,i) in list">
                <!-- small box -->
                <div class="small-box bg-aqua">
                    <div class="inner">
                        <h3>{{item.name}} </h3>
                        <span style="font-size: 16px;position: absolute;right: 10px;top: 20px;">{{item.companyName}}</span>
                        <p>{{item.remark}}</p>
                    </div>
                    <a href="#" class="small-box-footer" @click="openDetail(item)">修改 <i class="fa fa-arrow-circle-right"></i></a>
                </div>
            </div>


            <!-- ./col -->
        </div>
        <!-- /.row -->
        <!-- Main row -->
    </div>
</section>

<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=7e54a132"></script>
    <script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=558d0414"></script>

<script>
    var app = new Vue({
        el:'#app',
        data:{
            currentUser:getCurrentUser(),

            list:[]
        },
        methods:{
            openDetail:function (item) {
                var name=item.name;
                $.dialog({
                    content: 'url:detail.html?pageType=edit&name='+name,
                    title: '用户自定义字段',
                    width: 600,
                    height: 400,
                    max: true,
                    min: true,
                    lock: true
                });
            },
            addDetail:function () {
                $.dialog({
                    content: 'url:detail.html?pageType=edit',
                    title: '新增用户自定义字段',
                    width: 600,
                    height: 400,
                    max: true,
                    min: true,
                    lock: true
                });
            },
            getList:function () {
                var that=this;
                $.wyui.postMethod('/otherConfig/getList.json', {}, function (data) {
                    that.list=data;
                });
            }

        },
        mounted:function () {
           this.getList();
        }
    });

</script>
</body>
</html>
